<template>
  <div>
    <!-- 顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys-admin/product/album'}">相册管理</el-breadcrumb-item>
      <el-breadcrumb-item><span>{{ album.name }}</span></el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 图片列表 -->
    <div class="tips">
      <p><b>提示：</b>为保证较好的显示效果，请使用<i>宽高比为1:1</i>的图片，建议每张图片<i>不超过1MB</i>，图片数量<i>不超过6张</i>。</p>
    </div>
    <div class="picture-list">
      <el-upload
              v-if="pictureList.length < 6"
              class="picture-uploader"
              action="http://localhost:9082/resources/upload/image/product"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
        <i class="el-icon-upload picture-uploader-icon"></i>
        <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
        <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
      </el-upload>
      <div class="picture-item" v-for="picture in pictureList">
        <div class="cover-flag">
          <el-button class="button" @click="openSetCoverConfirm(picture)"
                     :class="picture.isCover == 1 ? 'cover' : 'not-cover'" icon="el-icon-s-flag"></el-button>
        </div>
        <div class="delete-button" style="display: none">
          <el-button type="danger" size="mini" class="button" icon="el-icon-delete-solid"></el-button>
        </div>
        <el-image class="image"
                  :key="picture.id"
                  :src="picture.url"
                  fit="cover"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 当前显示图片列表的相册数据
        album: {
          id: 0,
          name: '相册名称'
        },
        // 图片列表数据
        pictureList: [],
      }
    },
    methods: {
      // 上传成功后的回调
      handleUploadSuccess(response) {
        let data = {
          albumId: this.album.id,
          url: response.data.url
        };

        let url = 'http://localhost:9080/pictures/add-new';
        console.log('url = ' + url);

        let formData = this.qs.stringify(data);
        console.log('formData = ' + formData);

        let localJwt = localStorage.getItem("localJwt");
        this.axios
                .create({
                  'headers':{
                    "Authorization":localJwt
                  }
                })
                .post(url, formData).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.loadPictureList();
          } else {
            this.$alert(jsonResult.message, '警告', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        });
      },
      // 打开设置封面确认框
      openSetCoverConfirm(picture) {
        let message = '您确定将此图片设置为封面吗？';
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handlerSetCover(picture);
        }).catch(() => {
        });
      },
      // 处理设置封面
      handlerSetCover(picture) {
        if (picture.isCover == 1) {
          return;
        }

        let url = 'http://localhost:9080/pictures/' + picture.id + "/set-cover";
        console.log('url = ' + url);

        let localJwt = localStorage.getItem("localJwt");
        this.axios
                .create({
                  'headers':{
                    "Authorization":localJwt
                  }
                })
                .post(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.$message({
              message: '设置相册封面成功！',
              type: 'success'
            });
            this.loadPictureList();
          } else if (jsonResult.state == 40400) {
            this.$alert(jsonResult.message, '警告', {
              confirmButtonText: '确定',
              callback: action => {
                this.loadPictureList();
              }
            });
          } else {
            this.$alert(jsonResult.message, '警告', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        });
      },
      // 加载相册信息
      loadAlbumInfo() {
        let albumId = parseInt(this.$router.currentRoute.query.albumId);
        if (!albumId || albumId < 1) {
          let message = '参数错误，无法加载相册数据！';
          this.$alert(message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/sys-admin/product/album');
            }
          });
        }

        let url = 'http://localhost:9080/album/' + albumId;
        console.log('url = ' + url);

        let localJwt = localStorage.getItem("localJwt");
        this.axios
                .create({
                  'headers':{
                    "Authorization":localJwt
                  }
                })
                .get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.album = jsonResult.data;
            this.loadPictureList();
          } else {
            this.$alert(jsonResult.message, '警告', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/sys-admin/product/album');
              }
            });
          }
        });
      },
      // 加载相册的图片列表
      loadPictureList() {
        let url = 'http://localhost:9080/pictures/list-by-album?albumId=' + this.album.id;
        console.log('url = ' + url);

        let localJwt = localStorage.getItem("localJwt");
        this.axios
                .create({
                  'headers':{
                    "Authorization":localJwt
                  }
                })
                .get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.pictureList = jsonResult.data;
            console.log(this.pictureList)
          } else {
            this.$alert(jsonResult.message, '警告', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/sys-admin/product/album');
              }
            });
          }
        });
      }
    },
    mounted() {
      this.loadAlbumInfo();
    }
  }
</script>

<style>
  .tips {
    background: #fcf6f6;
    border: 1px solid #aaa;
    padding: 10px 20px;
    margin-bottom: 24px;
    font-size: 12px;
  }

  .tips i {
    color: #F56C6C;
    font-style: normal;
  }

  .picture-list .picture-item {
    width: 230px;
    height: 230px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #e8e6e6;
    border-radius: 6px;
    float: left;
    display: inline;
    position: relative;
  }

  .picture-list .picture-item .cover-flag {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-top-left-radius: 6px;
  }

  .picture-list .picture-item .cover-flag .button {
    background: transparent;
    border: none;
    border-top-left-radius: 6px;
    font-size: 20px;
    padding: 8px;
  }

  .picture-list .picture-item .cover-flag .button:hover {
    background: #fcefef;
  }

  .picture-list .picture-item .cover-flag .cover {
    color: #f00;
  }

  .picture-list .picture-item .cover-flag .not-cover {
    color: #aaa;
  }

  .picture-list .picture-item .delete-button {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-bottom-right-radius: 6px;
  }

  .picture-list .picture-item .delete-button .button {
    border: none;
    border-bottom-right-radius: 6px;
  }

  .picture-list .picture-item .image {
    width: 230px;
    height: 230px;
    border-radius: 6px;
  }

  .picture-list .picture-uploader {
    float: left;
    width: 230px;
    height: 230px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .picture-list .picture-uploader .picture-uploader-icon {
    width: 230px;
    height: 150px;
    font-size: 58px;
    color: #8c939d;
    line-height: 150px;
    text-align: center;
  }

  .picture-list .picture-uploader .picture-uploader-text {
    width: 230px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #8c939d;
  }

  .picture-list .picture-uploader .picture-uploader-text i {
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    color: #F56C6C;
  }
</style>